<template>
  <div class="root-container">
    <div
      :class="[
        'front-container',
        darkMode ? 'container-dark' : 'container-light',
      ]"
    >
      <h1 class="title">
        <span>来访记录</span>
      </h1>
      <div class="inner-container">
        <div class="command-container">
          <el-button
            v-if="showSelect != 'queryView'"
            type="info"
            link
            @click="showSelect = 'queryView'"
          >
            <el-icon><Search /></el-icon>
          </el-button>
          <el-button
            v-if="showSelect == 'queryView'"
            type="info"
            link
            @click="showSelect = 'inputView'"
          >
            <el-icon><Back /></el-icon>
          </el-button>
        </div>
        <transition name="el-fade-in" mode="out-in">
          <InputView
            v-if="showSelect == 'inputView'"
            @success="handleSuccess()"
          />
          <QueryView v-else-if="showSelect == 'queryView'" />
          <SuccessView v-else-if="showSelect == 'successView'" />
        </transition>
      </div>
    </div>
    <div class="back-container">
      <div class="image-container">
        <Logo />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import Logo from "@/components/brand/logo.vue";
import useCommonStore from "@/store/common.js";

import InputView from "./inputView.vue";
import QueryView from "./queryView.vue";
import SuccessView from "./successView.vue";

const commonStore = useCommonStore();
const darkMode = computed(() => commonStore.darkMode);

const showSelect = ref("inputView");

const handleSuccess = () => {
  showSelect.value = "successView";
  setTimeout(() => (showSelect.value = "inputView"), 2000);
};
</script>

<style scoped>
@import "@/styles/vibrate.css";
@import "./scopeStyle.css";
</style>
